.Modal {
  pointer-events: none;

  position: fixed;
  z-index: -1;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  z-index: var(--modal-z-index);
  transform: scale(0.5);

  max-width: 60%;
  padding: 20px;

  border-radius: 12px;

  transition: 0.3s transform;
}

.ModalRedesigned {
  .content {
    background: var(--light-bg-redesigned);
  }
}

.ModalDeprecated {
  .content {
    background: var(--bg-color);
  }
}

.opened {
  pointer-events: auto;
  z-index: var(--modal-z-index);
  opacity: 1;

  .content {
    transform: scale(1);
  }
}

.isClosing {
  .content {
    transform: scale(0.2);
  }
}
